import React, { useEffect, useState } from 'react';
import './RegistrationManage.css';
import { Input, Button, Table, message, Modal, Select } from 'antd';
import { DeleteOutlined, FormOutlined, SearchOutlined, FileTextOutlined } from '@ant-design/icons';
import axios from 'axios';


export default function IntegratedManage() {
    const [inpId, setInpId] = useState('')  // id查询
    const [inpPhone, setInpPhone] = useState('')  // 手机号查询
    const [TipModalOpen, setTipModalOpen] = useState(false)  // 弹窗提示
    const [detailModalOpen, setEditModalOpen] = useState(false)  // 编辑弹窗
    const [currentId, setCurrentId] = useState(null)  // 当前点击项id
    const inpIdChange = (e) => {  // id查询输入框变化
        setInpId(e.target.value)
    }
    const inpPhoneChange = (e) => {  // 手机号查询输入框变化
        setInpPhone(e.target.value)
    }

    const queryBtn = () => {  // 查询按钮
        axios.get('http://8.148.7.123:8000/register/search', {
            params: {
                page: 1,
                size: 100,
                id: inpId,
                phone: inpPhone,
            }
        }).then(res => {
            setTableData(() => {
                return res.data.data
            })
        })
    }
    const delChecked = () => {  // 批量删除
        setLoading(true);
        setTimeout(() => {
            axios.post('http://8.148.7.123:8000/register/batchdel', {
                ids: selectedRowKeys
            }).then(res => {
                if (res.data.code === 1) {
                    messageApi.open({
                        type: 'success',
                        content: res.data.msg
                    })
                } else {
                    messageApi.open({
                        type: 'error',
                        content: '删除失败'
                    })
                }
                getTableData();  // 更新表格数据
            })
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const handleCancel = () => {
        setTipModalOpen(false);
    };
    const del = (id) => {  // 删除按钮
        setCurrentId(id)
        setTipModalOpen(true);
    }
    const handleOk = () => {  // 确认删除
        axios.post('http://8.148.7.123:8000/register/batchdel', {
            ids: [currentId]
        }).then(res => {
            // console.log(res)
            if (res.data.code === 1) {
                message.success('删除成功')
                getTableData();  // 更新表格数据
            } else {
                message.error('删除失败')
            }
        })
        setTipModalOpen(false);
    };

    const detail = async (id) => {  // 详情按钮
        setEditModalOpen(true)
        await axios.get('http://8.148.7.123:8000/register/getbyid', {
            params: {
                id: id,
            }
        }).then(res => {
            const data = res.data.data[0]
            setDetailData(() => {
                return {
                    id: data.id,  // 订单编号
                    time: data.regtime.split('').slice(0, 19).join('').replace('T', ' '),  // 挂号时间
                    name: data.name,  // 患者姓名
                    further: data.further,  // 是否为复诊
                    report: data['48report'],  // 是否自我申报48小时核酸
                    department: data.department,  // 挂号科室
                    phone: data.phone,  // 手机号
                }
            })
        })
    }

    const detailOk = () => {  // 详情弹框确认按钮
        setEditModalOpen(false)
    }

    const detailCancel = () => {  // 详情弹框取消按钮
        setEditModalOpen(false)
    }
    // 表格列配置
    const columns = [
        {
            title: '订单编号',
            dataIndex: 'id',
        },
        {
            title: '患者姓名',
            dataIndex: 'name',
        },
        {
            title: '挂号科室',
            dataIndex: 'department',
        },
        {
            title: '是否为复诊',
            dataIndex: 'further',

        },
        {
            title: '是否自我申报48小时核酸',
            dataIndex: '48report',

        },
        {
            title: '订单操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <div>
                    <FileTextOutlined className='detail_icon' onClick={() => detail(record.id)} />
                    <DeleteOutlined className='delete_icon' onClick={() => del(record.id)} />
                </div>
            )
        },

    ];
    const [messageApi, contextHolder] = message.useMessage()  // 弹窗提示
    const [tableData, setTableData] = useState([])  // 表格数据
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);  // 选中项
    const [loading, setLoading] = useState(false);
    const [detailData, setDetailData] = useState({  // 详情弹框数据
        id: '',  // 订单编号
        time: '',  // 挂号时间
        name: '',  // 患者姓名
        further: '',  // 是否为复诊
        report: '',  // 48小时核酸
        department: '',  // 挂号科室
        phone: '',  // 手机号
    });  
    const onSelectChange = (newSelectedRowKeys) => {  // 选中项变化时触发
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {  // 行选择器配置
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const hasSelected = selectedRowKeys.length > 0;  // 是否有选中项
    // 获取表格数据
    const getTableData = () => {
        axios.get('http://8.148.7.123:8000/register/list', {
            params: {
                page: 1,
                size: 100,
            }
        }).then(res => {
            // console.log(res.data)
            setTableData(() => {
                return res.data.data
            })
        }).catch(err => {
            console.error(err)
        })
    }
    
    useEffect(() => {
        getTableData();
    }, [])  // 页面加载时获取表格数据
    return <div>
        {/* 删除弹框 */}
        <Modal title="系统提示" open={TipModalOpen} onOk={handleOk} onCancel={handleCancel} cancelText='取消' okText='确认删除'>
            <p>您正在删除用户挂号信息，此操作不可逆，删除后患者需重新挂号，确定删除吗?</p>
        </Modal>
        {/* 订单详情弹框 */}
        <Modal title="挂号详情" closable={false} maskClosable={false} open={detailModalOpen} onOk={detailOk} onCancel={detailCancel} cancelText='取消' okText='确定'
            footer={[
                <div key={"footer"} className='detail_footer'>
                    <Button className='detail_btn ok' key="ok" type="primary" onClick={detailCancel}>
                    确定
                    </Button>,
                    <Button className='detail_btn' key="cancel" loading={loading} onClick={detailOk}>
                        取消
                    </Button>
                </div>
            ]}
        >
            <div className="detail_box">
                <div>
                    <label htmlFor="">订单编号</label>
                    <Input disabled value={detailData.id} />
                </div>
                <div>
                    <label htmlFor="">挂号时间</label>
                    <Input disabled value={detailData.time} />
                </div>
                <div>
                    <label htmlFor="">患者姓名</label>
                    <Input disabled value={detailData.name} />
                </div>
                <div>
                    <label htmlFor="">是否为复诊</label>
                    <Input disabled value={detailData.further} />
                </div>
                <div>
                    <label htmlFor="">48H核算报告</label>
                    <Input disabled value={detailData.report} />
                </div>
                <div>
                    <label htmlFor="">挂号科室</label>
                    <Input disabled value={detailData.department} />
                </div>
                <div>
                    <label htmlFor="">手机号</label>
                    <Input disabled value={detailData.phone} />
                </div>
            </div>
        </Modal>
        {contextHolder}
        <div className="inp_box">
            <div style={{ whiteSpace: 'nowrap' }}>
                <label htmlFor="" style={{ fontWeight: 'bold' }}>订单编号</label>
                <Input className="search_inp" value={inpId} onChange={inpIdChange} style={{ width: '240px' }} placeholder="输入要查询的订单编号" />
                <label htmlFor="" style={{ fontWeight: 'bold' }}>手机号</label>
                <Input className="search_inp" value={inpPhone} onChange={inpPhoneChange} style={{ width: '240px' }} placeholder="输入要查询的手机号" />

                <Button className='search_btn' type="primary" size="small" icon={<SearchOutlined />} onClick={queryBtn}>查询</Button>
            </div>
            <div>
                <Button type="" size="small" onClick={delChecked} disabled={!hasSelected} loading={loading}>删除选中</Button>
            </div>
        </div>
        <Table bordered rowSelection={rowSelection} columns={columns} dataSource={tableData} rowKey={'id'} size='small' />
    </div >
}